<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>你是哪一代人？</title>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background: #f0f4ff;
            text-align: center;
            padding: 50px;
        }
        .form-card {
            max-width: 400px;
            margin: 0 auto;
            padding: 30px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        input {
            width: 80%;
            padding: 10px;
            margin: 12px 0;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 6px;
        }
        button {
            background: #6a5acd;
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 18px;
            border-radius: 8px;
            cursor: pointer;
        }
        button:hover { background: #5a4ac0; }
        h1 { color: #4b3f72; }
    </style>
</head>
<body>
<h1>⏳ 你是哪一代人？</h1>
<p>输入你的名字和年龄，看看你属于哪个时代群体！</p>

<div class="form-card">
    <form action="generation.jsp" method="post">
        <input type="text" name="name" placeholder="你的名字" required><br>
        <input type="number" name="age" min="1" max="120" placeholder="你的年龄（如：28）" required><br>
        <button type="submit">🔍 探测我的世代</button>
    </form>
</div>
</body>
</html></title>
</head>
<body>

</body>
</html>